<template>
  <div class="skill">
    <el-tabs class="tabs" v-model="activeName">
      <el-tab-pane class="add_New_Files" :label="tabsData[0].label" :name="tabsData[0].name">
        <el-form ref="colForm" :rules="rules" :model="colForm" label-width="100px">
          <el-form-item label="文件夹名称" prop="name">
            <el-input placeholder="请输入2到24个字符" v-model="colForm.name"></el-input>
          </el-form-item>
          <el-form-item label="文件夹描述" prop="desc">
            <el-input type="textarea" :autosize="{minRows: 4}" v-model="colForm.desc"></el-input>
          </el-form-item>
          <el-form-item label="标签" prop="tags">
            <el-input v-model="colForm.tags" placeholder="输入字符串，以逗号分隔，最多5个标签，超出的标签将被舍弃。"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitColForm('colForm')">立即创建</el-button>
            <el-button @click="resetColForm('colForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane class="add_skill_page" :label="tabsData[1].label" :name="tabsData[1].name">
        <loading v-if="!skillColsData" />
        <div class="skill-wrapper" v-if="skillColsData.length">
          <el-form :model="skillForm" label-width="100px" ref="skillForm" :rules="skillRules">
            <el-form-item label="选择文件夹" prop="name">
              <el-select v-model="skillForm.name" placeholder="请点击选择列表文件夹">
                <el-option
                  v-for="skill in skillColsData"
                  :value="skill.name"
                  :key="skill._id"
                >{{skill.name}}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="label" label="文章标题">
              <el-input placeholder="请输入技术文章的标题" v-model="skillForm.label"></el-input>
            </el-form-item>
            <el-form-item prop="body" label="文章内容">
              <el-input
                type="textarea"
                :autosize="{minRows: 3,maxRows: 11}"
                v-model="skillForm.body"
                placeholder="请输入技术文章的内容"
              ></el-input>
            </el-form-item>
            <el-form-item prop="type" label="技术类型">
              <el-radio-group v-model="skillForm.type">
                <el-radio label="node"></el-radio>
                <el-radio label="vue"></el-radio>
                <el-radio label="css"></el-radio>
                <el-radio label="js"></el-radio>
                <el-radio label="html"></el-radio>
                <el-radio label="other"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="标签" prop="tags">
              <el-input placeholder="请输入文章标签，用逗号隔开。最多5个标签，超出的标签将被舍弃。" v-model="skillForm.tags"></el-input>
            </el-form-item>
            <el-form-item prop="hot">
              <el-checkbox-group v-model="skillForm.hot">
                <el-checkbox label="置顶" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitFormSkillForm('skillForm')">立即创建</el-button>
              <el-button @click="resetSkillForm('skillForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="none-store" v-else>
          <span>你还没有建立技术文章存放的仓库，请先建立一个仓库！</span>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState, mapActions } from "Vuex";
export default {
  name: "skill",
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "请输入2到24个字符", trigger: "blur" },
          { min: 2, max: 24, message: "长度在 2 到 24 个字符", trigger: "blur" }
        ],
        desc: [
          {
            max: 60,
            message: "长度不能大于60个字符",
            trigger: "blur"
          }
        ],
        tags: [
          {
            max: 18,
            message: "总长度不能大于18个字符",
            trigger: "blur"
          }
        ]
      },
      skillRules: {
        name: [
          { required: true, message: "请选择技术文章文件夹", trigger: "blur" }
        ],
        label: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
          { min: 2, max: 24, message: "长度在 2 到 24 个字符", trigger: "blur" }
        ],
        body: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
          {
            min: 2,
            max: 10000,
            message: "长度在 2 到 10000 个字符",
            trigger: "blur"
          }
        ],
        tags: [
          {
            max: 18,
            message: "总长度不能大于18个字符",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择其中一个类型",
            trigger: "blur"
          }
        ]
      },
      activeName: "1",
      tabsData: [
        // 这是ui组件的选项
        {
          label: "新建仓库",
          name: "1"
        },
        { label: "新建文章", name: "2" }
      ],
      colForm: {
        desc: "",
        tags: "",
        name: ""
      },
      skillForm: {
        name: "",
        tags: "",
        label: "",
        hot: false,
        body: "",
        type: ""
      }
    };
  },
  methods: {
    submitFormSkillForm(name) {
      //发布文章
      this.$refs[name].validate(valid => {
        if (valid) {
          this.setSkillData({
            userName: this.userName,
            skillForm: this.skillForm
          })
            .then(res => {
              if (res.data.ok === 1) {
                this.resetSkillForm("skillForm");
                this.getSkillData(this.userName);
                alert(res.data.data);
              } else {
                alert(res.data.data);
              }
            })
            .catch(err => {
              console.log("错误提示：" + err);
            });
        }
      });
    },
    resetSkillForm(name) {
      this.$refs[name].resetFields();
    },
    submitColForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = this.colForm;
          let tags = data.tags.split(/,|，/);
          tags = tags.splice(0, 5);
          let newData = {
            desc: data.desc,
            name: data.name,
            userName: this.userName,
            tags: tags
          };
          this.setSkillCol(newData)
            .then(res => {
              if (res.data.ok === 1) {
                alert(res.data.data);
                this.activeName = "2";
              } else {
                alert("错误提示：" + res.data.data);
              }
            })
            .catch(err => {
              console.log("错误提示：" + err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetColForm(formName) {
      this.$refs[formName].resetFields();
    },
    ...mapActions("user", [
      "setSkillCol",
      "getSkillCol",
      "setSkillData",
      "getSkillData"
    ])
  },
  watch: {
    activeName() {
      if (this.activeName === "2") {
        this.getSkillCol(this.userName);
      }
    }
  },
  computed: {
    ...mapState("user", ["userName", "skillColsData"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.skill
  width: 100%
  height: 100%
  .tabs
    width: 90%
    margin: 0 auto
    padding: 5% 0
    .add_New_Files
      width: 100%
      margin-top: 50px
      .el-form
        .el-form-item
          margin-bottom: 40px
    .add_skill_page
      .none-store
        width: 100%
        height: 100px
        line-height: 100px
</style>